<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>excel文件简单处理页面</title>
</head>
<body>
    <h5>第一步</h5>
    <h5 style="color: brown;">请将有唯一性的字段背景设置为标准色中的深红</h5>
    <br>
    <form id="excelToDB">
        <input type="file" name="file" id="fileInput">
        <button type="button" onclick="uploadFile()">导入excel文件</button>
    </form>
    </br>
    <h5>第二步</h5>
    <h5 style="color: brown;">若参数选择比较列，则将对应需比较的列背景设置标准色中的浅蓝</h5>
    <form id="excelCompare">
        <input type="file" name="file" id="fileInput2">
        可选参数1：是否选择比较列，是<input type="radio" name="isCompare" value="1" id="isCompare">否<input type="radio" name="isCompare" value="0">    可选参数2:确认比较数据起始行（0开始）<input type="text" name="sl" id="sl">
        <button type="button" onclick="uploadFile2()">excel文件比较</button>
    </form>
    <br>
    <h5>第三步</h5>
    <button type="button" onclick="expo()">导出zip</button>
    <br>
    <h5>比较两文件不同处<h5 style="color: brown;">若没有参数2，则必须设置新表需要比较的列背景色为标准色中的浅蓝色</h5></h5>
    <form id="oldFile">
        旧文件：<input type="file" name="file" id="file1">
        新文件：<input type="file" name="file" id="file2">
        可选参数1：确定哪一行比较<input type="text" name="sh" id="sh">
        可选参数2：确定以哪一列为基础比较<input type="text" name="rl" id="rl">
        <button type="button" onclick="compareT()">比较两文件</button>
    </form>
</body>
<script>
   function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('请先选择文件！');
        return;
    }

    const formData = new FormData();
    formData.append('file', file); // 确保字段名与后端一致（这里是 "file"）

    fetch('http://localhost:8080/file/exGen', {
        method: 'POST',
        body: formData, // 不需要手动设置 Content-Type，浏览器会自动处理
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text(); // 或 response.json()
    })
    .then(data => {
        alert('上传成功！');
        fileInput.value = ''; // 清空文件选择
    })
    .catch(error => {
        console.error('上传失败:', error);
        alert(`上传失败: ${error.message}`);
    });
}
function uploadFile2() {
    const fileInput = document.getElementById('fileInput2');
    const file = fileInput.files[0];

    const isCompare = document.querySelector('input[name="isCompare"]:checked');
    const slInput = document.getElementById("sl")
    // 使用 URLSearchParams 自动处理 & 符号
    const params = new URLSearchParams();

    if (isCompare) {
        params.append('isCompare', isCompare.value || '1');
    }

    // 验证sl输入：必须是数字且大于等于0
    if (slInput && slInput.value.trim() !== '') {
        const slValue = slInput.value.trim();
        // 验证是否为有效数字且 >= 0
        if (!isNaN(slValue) && parseFloat(slValue) >= 0) {
            params.append('sl', slValue);
        }
    }

    // 构建完整的URL
    const queryString = params.toString();
    const url = `http://localhost:8080/create/compare${queryString ? '?' + queryString : ''}`;
    
    console.log(url);
    
    if (!file) {
        alert('请先选择文件！');
        return;
    }

    const formData = new FormData();
    formData.append('file', file); // 确保字段名与后端一致（这里是 "file"）

    fetch(url, {
        method: 'POST',
        body: formData, // 不需要手动设置 Content-Type，浏览器会自动处理
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text(); // 或 response.json()
    })
    .then(data => {
        alert('上传成功！');
        fileInput.value = ''; // 清空文件选择
    })
    .catch(error => {
        console.error('上传失败:', error);
        alert(`上传失败: ${error.message}`);
    });
}
function expo(){
    fetch('http://localhost:8080/create/download',{
        method: 'GET',
        headers: {
            'Accept': 'application/vnd.ms-excel',
        }
    })
    .then(response => {
        if(!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.blob();
    })
    .then(blob => {
        // 创建临时下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'me.zip'; // 与后端设置的 filename 一致
        document.body.appendChild(a);
        a.click(); // 触发下载
        window.URL.revokeObjectURL(url); // 释放内存
        a.remove();
    })
    .catch(error => {
        console.error('失败:', error);
        alert(`失败: ${error.message}`);
    });
}

function compareT() {
    const file1 = document.getElementById('file1');
    const oldFile = file1.files[0];
    if (!oldFile) {
        alert('请先选择文件！');
        return;
    }
    const file2 = document.getElementById('file2');
    const newFile = file2.files[0];
    if (!newFile) {
        alert('请先选择文件！');
        return;
    }
    const sh = document.getElementById("sh");
    const rl = document.getElementById("rl")

    const formData = new FormData();
    formData.append('oldFile', oldFile);
    formData.append('newFile', newFile);

    // 验证sh输入：必须是数字且大于等于0
    if (sh && sh.value.trim() !== '') {
        const shValue = sh.value.trim();
        // 验证是否为有效数字且 >= 0
        if (!isNaN(shValue) && parseFloat(shValue) >= 0) {
            formData.append('sh', shValue);
        }
    }

    // 验证rl输入：必须是数字且大于等于0
    if (rl && rl.value.trim() !== '') {
        const rlValue = rl.value.trim();
        // 验证是否为有效数字且 >= 0
        if (!isNaN(rlValue) && parseFloat(rlValue) >= 0) {
            formData.append('rl', rlValue);
        }
    }

    // 显示加载状态
    const submitBtn = document.querySelector('button[type="button"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = '处理中...';
    submitBtn.disabled = true;

    fetch('http://localhost:8080/file/oct', {
        method: 'POST',
        body: formData,
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        // 获取文件名从Content-Disposition头
        const contentDisposition = response.headers.get('Content-Disposition');
        let filename = 'newFile.xlsx';
        
        if (contentDisposition) {
            const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
            if (filenameMatch && filenameMatch[1]) {
                filename = filenameMatch[1];
            }
        }
        
        // 返回blob和文件名
        return response.blob().then(blob => ({ blob, filename }));
    })
    .then(({ blob, filename }) => {
        alert('文件处理成功！正在下载...');
        
        // 创建临时下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        
        // 清理
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        // 清空文件选择
        file1.value = '';
        file2.value = '';
        if (sh) sh.value = '';
    })
    .catch(error => {
        console.error('上传失败:', error);
        alert(`处理失败: ${error.message}`);
    })
    .finally(() => {
        // 恢复按钮状态
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    });
}

    </script>
</html>